<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <script src="/js/global.js"></script>
    <link rel="stylesheet" href="/css/font.css" type="text/css"/>
    <link rel="stylesheet" href="/css/layui.css" type="text/css"/>
    <link rel="stylesheet" href="/css/xadmin.css" type="text/css"/>
    <script type="text/javascript" src="/js/layui.js"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- 条件查询 -->
<div class="layui-form-item" style="margin-top: 20px;" onsubmit="false">
    <div class="layui-form-item">

        <label class="layui-form-label">供应商</label>
        <div class="layui-input-inline layui-form" style="width: 200px;">
            <select name="supplierid" id="supplierid" lay-verify="" lay-search="">
                <option value="0">请选择供应商</option>
            </select>
        </div>

        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline layui-form" style="width: 200px;">
            <select name="state" id="state" lay-verify="" lay-search="">
                <option value="0">待发货</option>
                <option value="1">已发货</option>
                <option value="2">已签收</option>
            </select>
        </div>

        <button class="layui-btn" id="search" data-type="reload">查询</button>

    </div>
</div>

<!-- 表格 -->
<table id="test" class="layui-hide" lay-filter="test"></table>

<script>
    layui.use(['layer', 'table', 'form', 'transfer', 'util', 'laydate'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var transfer = layui.transfer;
        var util = layui.util;
        var laydate = layui.laydate;

        //查询所有供应商
        $.get("../supplier/findAll", function (res) {
            if (res.code === 200) {
                let data = res.data;
                //循环遍历加入到下拉列表中supplierid
                for (let i = 0; i < data.length; i++) {
                    let option = '<option value="' + data[i].id + '">' + data[i].username + '</option>';
                    $("#supplierid").append(option);
                }
            }
            form.render('select');
        })

        //初始化表格数据
        table.render({
            elem: '#test',
            url: '../order/selectAll',
            method: "get",
            where: {
                'state': $("#state").val(),
            },
            title: '订单列表',
            page: true,
            id: 'testReload',
            //修改响应数据
            parseData: function (res) {
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [
                [{
                    field: 'orderid',
                    title: '订单号',
                    align: 'center',
                    fixed: 'left',
                    width: 170
                },
                    {
                        field: 'title',
                        title: '名称',
                        align: 'center'
                    }, {
                    field: 'adminname',
                    title: '采购者',
                    align: 'center'
                }, {
                    field: 'img',
                    title: '图片',
                    align: 'center',
                    templet: function (d) {
                        return '<img src="' + d.img + '" width="200px" height="200px" />';
                    }
                }, {
                    field: 'stock',
                    title: '数量',
                    align: 'center'
                }, {
                    field: 'price',
                    title: '单价',
                    align: 'center'
                }, {
                    field: 'sumprice',
                    title: '总价',
                    align: 'center'
                }, {
                    field: 'suppliername',
                    title: '供应商',
                    align: 'center'
                }, {
                    field: 'state',
                    title: '状态',
                    align: 'center',
                    templet: function (d) {
                        if (d.state === 0) {
                            return '<span class="layui-badge layui-bg-blue">待发货</span>';
                        } else if (d.state === 1) {
                            return '<span class="layui-badge layui-bg-green">已发货</span>';
                        } else if (d.state === 2) {
                            return '<span class="layui-badge layui-bg-orange">已签收</span>';
                        }
                    }
                }
                ]
            ],
            done: function (res, curr, count) {
                // 如果有使用到下拉筛选，这句话必须要
                hoverOpenImg();//显示大图
                $('table tr').on('click', function () {
                    $('table tr').css('background', '');
                    $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
                });
            }
        });

        function hoverOpenImg() {
            var img_show = null; // tips提示
            $('td img').hover(function () {
                var kd = $(this).width();
                kd1 = kd * 4;          //图片放大倍数
                kd2 = kd * 4 + 30;       //图片放大倍数
                var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" + kd1 + "px;' />";
                img_show = layer.tips(img, this, {
                    tips: [2, 'rgba(41,41,41,.5)']
                    , area: [kd2 + 'px']
                });
            }, function () {
                layer.close(img_show);
            });
            $('td img').attr('style', 'max-width:70px;display:block!important');
        };

        //模糊查询
        $('#search').on('click', function () {
            table.reload('testReload', {
                where: {
                    'supplierid': $("#supplierid").val(),
                    'state': $("#state").val(),
                }
            });
        });

        //重新加载
        function back() {
            table.reload('testReload', {
                page: {
                    curr: $(".layui-laypage-em").next().html()
                }
            });
        }


    });
</script>
</body>
</html>
